<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <Input
          placeholder="请输入查询手机号"
          v-model="bloc.form.phone"
          style="width: 180px; margin-right: 10px"
        />
        <DatePicker
          type="daterange"
          placeholder="签到时间"
          format="yyyy/MM/dd"
          v-model="bloc.form.date"
          :editable="false"
          style="width: 200px; margin-right: 10px"
        ></DatePicker>
        <Button
          type="primary"
          icon="ios-search"
          style="margin: 0 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
        >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
        >重置</Button
        >
      </div>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
  </div>
</template>

<script lang="ts">
    import { Component, Vue } from "vue-property-decorator";
    import { Route } from "vue-router";
    import { SignLogBloc } from "@/view/signlog/SignLogBloc";
    import { formatDate } from "@/base/util/Dates";
    import { Validation } from "@/base/Validation";

    const columns = (bloc: SignLogBloc) => [
        {
            title: "会员昵称",
            key: "memberid",
            render: (h: any, params: any) => {
                return h("span", {
                    domProps: {
                        innerText: params.row.nickname,
                    },
                });
            },
            align: "left",
            minWidth: 220,
            tooltip: true,
        },
        {
            title: "会员手机号",
            key: "memberid",
            render: (h: any, params: any) => {
                return h("span", {
                    domProps: {
                        innerText: params.row.phone,
                    },
                });
            },
            align: "left",
            minWidth: 220,
            tooltip: true,
        },
        {
            title: "签到时间",
            render: (h: any, params: any) => {
                return h("span", {
                    domProps: {
                        innerText: formatDate(
                            new Date(params.row.created),
                            "yyyy-MM-dd hh:mm:ss"
                        ),
                    },
                });
            },
            width: 160,
            align: "left",
            tooltip: true,
        },
        // {
        //     title: "操作",
        //     slot: "action",
        //     width: 200,
        //     align: "left",
        //     fixed: "right",
        // },
    ];

    @Component
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
                vm.bloc
                    .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
                    .catch((e) => {
                        vm.$Message.error("操作错误");
                    });
            });
        }
        bloc: SignLogBloc = new SignLogBloc();
        Validation = Validation;
        columns = columns(this.bloc);
     }

</script>

<style lang="less">
</style>
